<template>
    <VcTable ref="CustomTableRef" :page="page" :index="true" :selected="true" :columns="columns" :loading="loading"
        :data="tableData" :operation-column="operationColumn" @sort-change="sortChange" @handle-operation="handleOperation"
        @fliter-change="filterChange" @selection-change="selectionChange" @size-change="sizeChange"
        @current-change="currentChange">
    </VcTable>
</template>
  
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTableList } from '@/api/index'
import useTable, { type OperationFun } from '@/hooks/useTable'
import VcTable from 'packages/vue-custom-table';
// 操作列表配置
const operationColumn = {
    'label': '操作',
    'width': 180,
    'fixed': 'right',
    btns: [
        {
            label: '修改',
            icon: 'Edit',
            type: 'edit',
            style: 'primary',
        },
        {
            label: '删除',
            icon: 'Delete',
            type: 'del',
            style: 'danger'
        },
    ]
}
const delFun = (data: any) => {
    ElMessageBox.confirm(
        `确定删除数据${data.name}?`,
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            loadTableData()
        })
}
const operationFun: OperationFun = (_type, _data) => {
    switch (_type) {
        case 'del':
            delFun(_data);
            break;
        case 'edit':
            ElMessage({
                type: 'info',
                message: '你点击了修改按钮',
            })
            break;
    }
}
const columns = [
    {
        'prop': 'startDate',
        'label': '开始时间',
        'width': 180,
        'formatter': (row: any) => {
            return row['startDate']
        },
        'sort': true,
        'search': {
            'type': 'date'
        }
    },
    {
        'prop': 'endDate',
        'label': '结束时间',
        'width': 180,
        'formatter': (row: any) => {
            return row['endDate']
        },
        'sort': true,
        'search': {
            'type': 'date',
            'minLimit': 'startDate'

        }
    },
    {
        'prop': 'name',
        'label': '姓名',
        'width': 120,
        'search': {
            'type': 'input'
        }
    },
    {
        'label': '国家',
        'prop': 'city',
        'width': 120,
        'search': {
            'type': 'select',
            'options': [
                { label: '选项一', value: 1 },
                { label: '选项二', value: 2 }
            ]

        }
    },
    {
        'label': '城市',
        'prop': 'state',
        'width': 120,
        'search': {
            'type': 'remoteSelect',
            'multiple': true,
            'remoteApi': (_val: string) => {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve([
                            { label: '城市1', value: 1 },
                            { label: '城市2', value: 2 },
                            { label: '城市3', value: 3 },
                            { label: '城市4', value: 4 }
                        ] as any)
                    }, 1000);
                })
            }

        }
    },
    {
        'label': '地址',
        'prop': 'address',
        'width': 600,
        'search': {
            'type': 'input'
        }
    },
    {
        'label': 'zip',
        'prop': 'zip',
        'width': 120,
        'search': {
            'type': 'input'
        }
    }
]
const {
    CustomTableRef,
    page,
    tableData,
    loading,
    sortChange,
    handleOperation,
    filterChange,
    selectionChange,
    sizeChange,
    currentChange,
    loadTableData
} = useTable({ tableApi: getTableList, operation: operationFun });
</script>